@extends('layouts.layouts')
@section('title')
    <title>后台首页</title>
    <style>
        .file {
            position: relative;
            display: inline-block;
            background: #D0EEFF;
            border: 1px solid #99D3F5;
            border-radius: 4px;
            padding: 4px 12px;
            overflow: hidden;
            color: #1E88C7;
            text-decoration: none;
            text-indent: 0;
            line-height: 20px;
        }
        .file input {
            position: absolute;
            font-size: 100px;
            right: 0;
            top: 0;
            opacity: 0;
        }
        .file:hover {
            background: #AADFFD;
            border-color: #78C3F3;
            color: #004974;
            text-decoration: none;
        }
    </style>
@endsection
@section('content')
    <link href="/lib/ueditor/themes/default/css/umeditor.css" type="text/css" rel="stylesheet">
    <script type="text/javascript" charset="utf-8" src="/lib/ueditor/umeditor.config.js"></script>
    <script type="text/javascript" charset="utf-8" src="/lib/ueditor/umeditor.min.js"></script>
    <script type="text/javascript" src="/lib/ueditor/lang/zh-cn/zh-cn.js"></script>
    <script src="/js/upload.js" type="text/javascript"></script>
    <script src="/js/mobileBUGFix.mini.js" type="text/javascript"></script>
    <link href="/css/ueditor.css" type="text/css" rel="stylesheet">
    <div class="content">
        <div class="header">
            <ul class="breadcrumb">
                <li><a href="/wechat/menu">菜单栏管理</a> </li>
                <li class="active">菜单列表</li>
            </ul>
        </div>
        <div class="main-content">
            <ul class="nav nav-tabs nav-tabs-course">
                <li role="presentation" class="course_add active"><a href="javascript:void(0);">添加菜单</a></li>
                <!--<li role="presentation" class="course_hour_add"><a href="javascript:void(0);">课时添加</a></li>-->
            </ul>

 <form class="form-horizontal" id="courseFormInfo" action="/wechat/dataUpdate" method="post">
                {{csrf_field()}}
                <input type="hidden" name="id" value = "{{$id}}"/>
            <div class="course_class row">
                   <div class="col-md-8">
                        <br>
                            <div class="tab-content" id="menuId" class="menuId">

                                <div class="form-group">
                                    <label for="inputEmail3" class="col-sm-3 control-label">一级菜单</label>
                                    
                                       <div class="col-sm-3"> <input type="text" class="form-control" id="inputEmail3" name="title" placeholder="常见问题名称" value="{{$data['name']}}"><br/></div>
                                        @if(isset($data['type']))
                                          <div class="col-sm-3">  <select name="mid" id="DropDownTimezone" class="form-control">
                                                <option @if($data['type'] == "click") selected @endif value="1">点击事件（click事件）</option>
                                                <option @if($data['type'] == "view") selected @endif value="2">跳转链接（view事件）</option>
                                            </select><br/></div>
                                            
                                             @if($data['type'] == "click")
                                               <div class="col-sm-3"> <input type="text" class="form-control" id="inputEmail3" name="url" placeholder="" value = "{{$data['key']}}"></div>
                                                @else
                                              <div class="col-sm-3">  <input type="text" class="form-control" id="inputEmail3" name="url" placeholder="" value = "{{$data['url']}}"></div>
                                            @endif
                                        @else
                                          <div class="col-sm-3"><select name="mid" id="DropDownTimezone" class="form-control">
                                                <option value="1">点击事件（click事件）</option>
                                                <option value="2">跳转链接（view事件）</option>
                                            </select><br/></div>
                                          <div class="col-sm-3">  <input type="text" class="form-control" id="inputEmail3" name="url" placeholder=""></div>
                                        @endif
                                        <button  type="button" class="btn" id="childMenu" style="position: absolute;background:#286090;color:#fff;">添加子菜单</button>
                                    </div>
                                </div>
                           
                            @if(isset($data['sub_button']))
                                @foreach($data['sub_button'] as $k=>$v)
                                        <div class="tab-content childMenu"  id="childMenu{{$k+1}}">
                                            <div class="form-group">
                                                <label for="inputEmail3" class="col-sm-3 control-label">❤❤子菜单</label>
                                                <div class="col-sm-3">
                                                    <input type="text" class="form-control" id="inputEmail3" name="title{{$k+1}}" placeholder="常见问题名称" value="{{$v['name']}}"><br/>
                                                </div>
                                                <div class="col-sm-3">
                                                    <select name="mid{{$k+1}}" id="DropDownTimezone" class="form-control">
                                                        <option @if($v['type'] == "click") selected @endif value="1">点击事件（click事件）</option>
                                                        <option @if($v['type'] == "view") selected @endif value="2">跳转链接（view事件）</option>
                                                    </select>
                                                    <br/>
                                                </div>
                                               <div class="col-sm-3">
                                                @if($v['type'] == "click")
                                                     <input type="text" class="form-control" id="inputEmail3" name="url{{$k+1}}" placeholder="" value = "{{$v['key']}}">
                                                @else
                                                     <input type="text" class="form-control" id="inputEmail3" name="url{{$k+1}}" placeholder="" value = "{{$v['url']}}">
                                                @endif
                                                </div>
                                                <button class="deldete btn" data-attr = "{{$k+1}}" style="position: absolute;background:#286090;color:#fff;">删除</button>
                                            </div>
                                        </div>
                                @endforeach
                            @endif
                    </div>
                </div>
                   
                    <div class="row">
                        <p>
                            <button type="submit" class="btn btn-primary btn-lg col-md-offset-5" style="width:120px;background:#286090;color:#fff;">提交</button>
                        </p>
                    </div>

            </form>
        </div>
    </div>
    <script src="/js/course.js"></script>
    <script src="/lib/jquery.validate.js" type="text/javascript"></script>
    <script>
   
 $(".deldete").click(function(){
            var t = $(this).attr("data-attr");
             $("#childMenu"+t).remove();
    });
    $(document).ready(function(){

         @if(isset($data['sub_button']))
         var i = {{count($data['sub_button'])}};
         @else
         var i = 0;
        @endif
        $("#childMenu").click(function(){
            var num1 = $(".childMenu").length;
                i++;
                if(num1<=4){
                   var str = '<div class="tab-content childMenu"  id="childMenu'+i+'"><div class="form-group"><label for="inputEmail3" class="col-sm-3 control-label">❤❤子菜单</label><div class="col-sm-3"><input type="text" class="form-control" id="inputEmail3" name="title'+i+'" placeholder="菜单标题"><br/></div><div class="col-sm-3"><select name="mid'+i+'" id="DropDownTimezone" class="form-control"><option value="1">点击事件（click事件）</option><option value="2">跳转链接（view事件）</option></select><br/></div><div class="col-sm-3"><input type="text" class="form-control" id="inputEmail3" name="url'+i+'" placeholder="例如:http://m.saipubbs.com"></div><a  class="deldete btn" data-attr = "'+i+'" btn btn-primary btn-lg col-md-offset-5 " style="position: absolute;background:#286090;color:#fff;">删除</a></div></div>';
                    $("#menuId").append(str);
                    $(".deldete").click(function(){
                        var t = $(this).attr("data-attr");
                        $("#childMenu"+t).remove();
                    });

                }
        })
  
    });

    </script>
    <script>
        
        $("#courseFormInfo").validate({
            onsubmit: true,// 是否在提交是验证
            submitHandler: function (form) {
                var name = $("input[name='name']").val();
				var status = $("input[name = 'status']").val();
				var content = $("input[name = 'content']").val();
                if(name == ''){
                    swal("问题名称未填!");
                    return false;
                }
				if(status == ""){
					swal("状态未选择！");
					return false;
				}
             if(content == "" ){
					swal("请填写内容！");
					return false;
			 }    
                form.submit();
            }
        });
    </script>
    <style type="text/css">
        .col-sm-2{
            width:60px;
        }
        .course_content{
            margin-right: -30px;
            margin-left: -30px;
            margin-top:5px;
        }
        .btn-success{
            background-image:none!important;
        }
    </style>
@endsection